<template>
    <div class="icon-list-box flex-row-center">
        <div class="icon-list-box-name">
            {{boxName}}
        </div>
        <div class="icon-list-box-body flex-row-center">
            <div v-for="(item,index) in objList" class="icon-list-box-body-item">
                  <el-tooltip effect="dark" :content="item.title" placement="top" v-html="">
                      <div v-html="item.content" style="cursor: pointer" @click="click({...item,index})"></div>
                  </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "IconBox",
        props:{
            list:{
                type:Array,
            },
            name:{
                type:String,
            }
        },
        emits:['change'],
        data(){


            return{
                boxName:this.$props.name,
                objList:[
                    {
                        title:"",
                        content:"",
                        to:""
                    }
                ]
            }
        },
        methods:{
          click(item){
              this.$emit('change',item)
          }
        },
        watch:{
            list(newV){
                this.objList=newV
            },
            name(newV){
                this.boxName=newV
            }
        },
        mounted() {
            this.objList=this.$props.list
        }
    }
</script>

<style scoped lang="less">
    .icon-list-box{
        .icon-list-box-name{
            font-size: 14px;
        }
        .icon-list-box-body{
            .icon-list-box-body-item{
                margin: 0 5px 0 5px;
            }
        }
    }
</style>